<template>
	<div id="app">
		<!-- <expression-hello></expression-hello> 全局注册过的 -->
		<!-- <condition-hello></condition-hello> -->
		<!-- <event-hello></event-hello> -->
		<!-- <list-hello /> -->
		<!-- <list-ehance /> -->
		<!-- <input-manual /> -->
		<!-- <input-auto /> -->
		<!-- <switch-case /> -->
		<!-- <table-list /> -->
		<!-- <str-reverse />  -->
		<!-- <folding-panel />  -->
		<!-- <check-input-box /> -->
		<!-- <brand-management /> -->
		<!-- <to-do-list /> -->
		<!-- <to-do-list1 /> -->
		<!-- <tab-switch /> -->
		<!-- <dynamic-label /> -->
		<!-- <event-modifier /> -->
		<!-- <key-modifier /> -->
		<!-- <scoring-function /> -->
		<!-- <folding-panel-accordion /> -->
		<!-- <computed-properties /> -->
		<!-- <watch /> -->
		<!-- <book-case /> -->
		<!-- <check-box-sum /> -->

		<!-- 父传子 -->
		<!-- <father-to-son
			title="超级好吃的口水鸡"
			:price="counter"
			info="快来买啊"
		/> -->
		<!-- <father-to-son title="超级好吃的可爱多" :price="20" info="好甜啊" /> -->
		<!-- <father-to-son title="超级好吃的钵钵鸡" :price="50" info="呜呜呜呜呜" /> -->
		<!-- <father-to-son
			v-for="item in list"
			:key="item.id"
			:title="item.title"
			:price="item.price"
			:info="item.info"
		></father-to-son> -->

		<!-- 子传父 基础数据类型 -->
		<!-- <son-to-father
			v-for="(item, idx) in list"
			:key="item.id"
			:title="item.title"
			:price="item.price"
			:info="item.info"
            :index="idx"
            @subPrice="fn"
		/> -->

		<!-- 子传父 引用数据类型-->
		<!-- <son-to-father1
			v-for="(item, idx) in list"
			:key="item.id"
            :obj="list"
            :index="idx"
		/> -->
        
        <!-- 跨组件传值 通过App.vue同时引入my-product和list-->
		<!-- <my-product
			v-for="(item, index) in list"
			:key="index"
			:title="item.title"
			:price="item.price"
			:info="item.info"
		/>
		<list :arr="list"/> list数据放在App.vue里面-->

        <!-- <change-name/> -->
        <!-- <change-age/> -->
        
        <!-- <to-do-header/>
        <to-do-main/>
        <to-do-footer/> -->

        <!-- <life-cycle /> -->
        <!-- <axios-get /> -->
        <!-- <ref /> -->
        <!-- <next-tick /> -->
        <!-- <shopping-cart /> -->
        <!-- <next-tick-focus /> -->
        <!-- <use-dynamic /> -->
        <!-- <component-slot /> -->
        <goods-index />
	</div>
</template>

<script>
// import ExpressionHello from "./components/ExpressionHello.vue"; // 插值表达式
import ConditionHello from "./components/ConditionalRendering.vue"; // 条件渲染
import EventHello from "./components/BindingEvent.vue"; // 事件绑定
import ListHello from "./components/ListRendering.vue"; // 列表渲染
import ListEhance from "./components/ListRenderingPrimary.vue"; // 列表渲染初级
import InputManual from "./components/InputBoxManual.vue"; // 输入框手动绑定数据
import InputAuto from "./components/InputBoxAuto.vue"; // 输入框双向数据绑定
import ToDoList from "./components/ToDoList.vue"; // 增删改查
import ToDoList1 from "./components/ToDoList1.vue"; // 增删改查组件版
import SwitchCase from "./components/SwitchCase.vue"; // 开关案例
import TableList from "./components/TableList.vue"; // 表格渲染
import StrReverse from "./components/StrReverse.vue"; // 字符串反转案例
import FoldingPanel from "./components/FoldingPanel.vue"; // 折叠面板案例
import CheckInputBox from "./components/CheckInputBox.vue"; // 复选框渲染案例
import BrandManagement from "./components/BrandManagement.vue"; // 品牌管理案例
import TabSwitch from "./components/TabSwitch.vue"; // Tab选项卡案例
import DynamicLabel from "./components/DynamicLabel.vue"; // 动态编辑标签案例
import EventModifier from "./components/EventModifier.vue"; // 事件修饰符
import KeyModifier from "./components/KeyModifier.vue"; // 按键修饰符
import ScoringFunction from "./components/ScoringFunction.vue"; // 评分功能
import FoldingPanelAccordion from "./components/FoldingPanelAccordion.vue"; // 折叠面板手风琴案例
import ComputedProperties from "./components/ComputedProperties.vue"; // 计算属性
import Watch from "./components/Watch.vue"; // 侦听器
import BookCase from "./components/BookCase.vue"; // 书籍求和案例
import CheckBoxSum from "./components/CheckBoxSum.vue"; // 复选框求和案例
import FatherToSon from "./components/FatherToSon.vue"; // 父传子传值
import SonToFather from "./components/SonToFather.vue"; // 子传父传值 简单数据类型
import SonToFather1 from "./components/SonToFather1.vue"; // 子传父传值 引用数据类型
// 跨组件传值
import MyProduct from "./components/MyProduct.vue";
import List from "./components/List.vue";

// 跨组件传值 通过EventBus文件夹
import ChangeAge from './components/ChangeAge.vue';
import ChangeName from "./components/ChangeName.vue";

// todolist案例
import ToDoHeader from "./components/TodoHeader.vue";
import ToDoFooter from "./components/TodoFooter.vue";
import ToDoMain from "./components/TodoMain.vue";

import LifeCycle from "./components/LifeCycle.vue"; // 生命周期
import AxiosGet from "./components/AxiosGet.vue";// axios 请求

import Ref from "./components/Ref.vue"; // $ref
import NextTick from "./components/NextTick.vue"; // $nextTick
import ShoppingCart from "./components/ShoppingCart.vue"; // 购物车案例
import NextTickFocus from "./components/NextTickFocus.vue";// $nextTick使用场景
import UseDynamic from "./components/use-dynamic.vue"; // 动态组件及组件缓存（keep-alive）
import ComponentSlot from "./components/component-slot.vue"; // 组件插槽
import GoodsIndex from "./components/tabs/goods-index.vue";// tabs 案例
export default {
	components: {
		// ExpressionHello,
		ConditionHello,
		EventHello,
		ListHello,
		ListEhance,
		InputManual,
		InputAuto,
		ToDoList,
		ToDoList1,
		SwitchCase,
		TableList,
		StrReverse,
		FoldingPanel,
		CheckInputBox,
		BrandManagement,
		TabSwitch,
		DynamicLabel,
		EventModifier,
		KeyModifier,
		ScoringFunction,
		FoldingPanelAccordion,
		ComputedProperties,
		Watch,
		BookCase,
		CheckBoxSum,
		FatherToSon,
		SonToFather,
		SonToFather1,
		MyProduct,
		List,
        ChangeName,
        ChangeAge,
        ToDoHeader,
        ToDoFooter,
        ToDoMain,
        LifeCycle,
        AxiosGet,
        Ref,
        NextTick,
        ShoppingCart,
        NextTickFocus,
        UseDynamic,
        ComponentSlot,
        GoodsIndex,
	},
	name: "App",
	// 放数据的地方
	data() {
		return {
			counter: 123,
			msg: "hello world",
			list: [
				{
					id: 1,
					title: "叫花鸡",
					price: 60,
					info: "嘴馋了",
				},
				{
					id: 2,
					title: "北京烤鸭",
					price: 200,
					info: "好贵啊",
				},
				{
					id: 3,
					title: "辣子鸡",
					price: 150,
					info: "好辣",
				},
			],
		};
	},
	// 放函数的地方
	methods: {
		// 子传父
		fn(index, sonPrice) {
			this.list[index].price > 1 &&
				(this.list[index].price = this.list[index].price - sonPrice);
		},
	},
};
</script>